<template>
  <div class="home">
    <!-- 导航栏 -->
    <div class="header w">
      <div class="logo">
        <img src="../assets/biaozhi.png" alt="" />
      </div>
      <div class="nav">
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="#">免费课程</router-link></li>
          <li><router-link to="#">项目实战</router-link></li>
          <li><router-link to="#">职业规划</router-link></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" value="记得快忘得慢" />
        <button>搜索</button>
      </div>
      <div class="user">
        <router-link to="#">会员中心</router-link> |
        <router-link to="#">我的学习</router-link> |
        <router-link to="#">登录/注册</router-link>
      </div>
    </div>
    <!-- 导航栏结束 -->
    <!-- 主体部分 -->
    <div class="banner">
      <div class="w">
        <div class="subnav">
          <ul v-for="m in menuname" :key="m.id">
            <li>
              <router-link :to="{ path: m.path }"
                >{{ m.name }}<span><i class="el-icon-arrow-right"></i></span
              ></router-link>
            </li>
          </ul>
        </div>
        <div class="photo">
          <img
            src="https://edu-image.nosdn.127.net/5dcb3851b1f14c5bb5aebb4efdac59cf.png?imageView&quality=100"
            alt=""
          />
        </div>
      </div>
      <div class="cheng">
        <h3>由你搜<span style="color: rgb(255, 63, 41)">自研课程承诺</span></h3>
        <ul>
          <li>
            <i class="el-icon-user"></i>
            <span style="margin-left: 5px">专业名师授课</span>
          </li>
          <li>
            <i class="el-icon-data-line"></i>
            <span style="margin-left: 5px">深度系统化教学</span>
          </li>
          <li>
            <i class="el-icon-present"></i>
            <span style="margin-left: 5px">全程服务保障</span>
          </li>
          <li>
            <i class="el-icon-wallet"></i>
            <span style="margin-left: 5px">未开课不满意退款</span>
          </li>
        </ul>
      </div>
      <!-- 自研公开课 -->
      <div class="bigbox">
        <div class="bigbox-left">
          <div class="bigbox-header">
            <h2>自研公开课</h2>
            <router-link to="#"
              >更多<i class="el-icon-arrow-right" style="margin-left: 5px"></i
            ></router-link>
          </div>
          <div class="bigbox-main">
            <ul v-for="p in publicclass" :key="p.id">
              <li>
                <img
                  :src="'http://localhost:3000/' + p.pict"
                  alt="图片加载失败"
                />
                <h4>{{ p.title }}</h4>
                <div class="name">
                  {{ p.author }}<button>{{ p.call }}</button>
                </div>
                <div class="info">{{ p.fiche }}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="bigbox-right">
          <div class="bigbox-header">
            <h2>课堂直播</h2>
            <router-link to="#"
              >更多<i class="el-icon-arrow-right" style="margin-left: 5px"></i
            ></router-link>
          </div>
        </div>
      </div>
      <!-- 自研公开课结束 -->
      <!-- 微专业 -->
      <div class="bigmiddle">
        <div class="bigmiddle-header">
          <h2>微专业</h2>
          <router-link to="#"
            >更多<i class="el-icon-arrow-right" style="margin-left: 5px"></i
          ></router-link>
        </div>
        <div class="bigmiddle-main">
          <ul v-for="item in major" :key="item.id">
            <li>
              <img
                :src="'http://localhost:3000/' + item.picture"
                alt="图片加载失败"
              />
              <router-link to=""
                ><h4>{{ item.title }}</h4></router-link
              >
              <div class="inf">{{ item.card }}</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 微专业结束 -->
    </div>
    <div class="footer">
      <div class="w">
        <div class="title">
          <ul>
            <li><router-link to="#">关于我们</router-link></li>
            <li><router-link to="#">联系我们</router-link></li>
            <li><router-link to="#">帮助中心</router-link></li>
            <li><router-link to="#">客户服务</router-link></li>
            <li><router-link to="#">新手指南</router-link></li>
            <li><router-link to="#">合作机构</router-link></li>
            <li><router-link to="#">合作导师</router-link></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      major: [],
      publicclass: [],
      menuname: [],
    };
  },
  created() {
    this.queryMajor();
    this.queryPublic();
    this.queryMenu();
  },
  methods: {
    queryMajor() {
      this.axios
        .get("http://localhost:3000/major")
        .then((response) => {
          this.major = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    queryPublic() {
      this.axios
        .get(" http://localhost:3000/publicclass")
        .then((response) => {
          this.publicclass = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    queryMenu() {
      this.axios
        .get(" http://localhost:3000/menuname")
        .then((response) => {
          this.menuname = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.w {
  width: 1200px;
  margin: auto;
}
.header {
  height: 42px;
  /* 上下30 */
  margin: 30px auto;
}
/* 去除li样式 */
li {
  list-style: none;
}
/* 去除所有a链接下划线 */
a {
  text-decoration: none;
  color: #050505;
}
.logo {
  float: left;
  width: 198px;
  height: 42px;
}
.logo img {
  width: 198px;
  height: 42px;
}
.nav {
  float: left;
  margin-left: 10px;
}
.nav ul li {
  float: left;
}
.nav ul li a {
  display: block;
  height: 42px;
  /* 上下给0 左右给10 */
  padding: 0 10px;
  /* 垂直居中 */
  line-height: 42px;
  font-size: 18px;
  color: #050505;
}
/* 鼠标划过 下划线 */
.nav ul li a:hover {
  border-bottom: 2px solid rgb(255, 63, 41);
  color: rgb(255, 63, 41);
}
.search {
  float: left;
  width: 412px;
  height: 42px;
  margin-left: 15px;
}
.search input {
  float: left;
  width: 320px;
  height: 40px;
  border: 1px solid rgb(255, 63, 41);
  /* 将边框右设为0 */
  border-right: 0;
  color: #bfbfbf;
  font-size: 14px;
  padding-left: 15px;
  border-radius: 5px 0 0 5px;
  /* 去除被点击时的黑框 */
  outline: none;
}
.search button {
  float: left;
  width: 70px;
  height: 42px;
  background-color: rgb(255, 63, 41);
  border: 0;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
}
.user a {
  line-height: 42px;
  color: #050505;
}
.user a:hover {
  color: rgb(255, 63, 41);
}
/* banner部分 */
.banner {
  height: 1200px;
  background-color: rgb(242, 242, 242);
}
.banner .w {
  width: 1200px;
  height: 421px;
  border-radius: 10px;
}
.subnav {
  float: left;
  width: 190px;
  height: 421px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px 0 0 10px;
}
.photo img {
  float: left;
  width: 1000px;
  height: 421px;
  border-radius: 0 10px 10px 0;
}
.subnav ul li a {
  font-size: 16px;
  color: rgb(51, 51, 51);
  font-weight: 700;
}
.subnav ul li a:hover {
  color: rgb(255, 63, 41);
}
.subnav ul li {
  height: 45px;
  line-height: 45px;
}
.subnav ul li a span {
  float: right;
}
.cheng {
  width: 1190px;
  height: 60px;
  margin: auto;
  margin-top: 10px;
  border-radius: 10px;
  /* 盒子阴影 */
  box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  line-height: 60px;
}
.cheng h3 {
  float: left;
  margin-left: 30px;
}
.cheng ul {
  float: left;
}
.cheng ul li {
  float: left;
  margin-left: 60px;
}
/* 自研公开课 */
.bigbox {
  width: 1190px;
  height: 350px;
  /* background-color: aqua; */
  margin: auto;
  margin-top: 10px;
}
.bigbox-left {
  float: left;
  width: 820px;
  height: 350px;
  /* background-color: yellow; */
}
.bigbox-right {
  float: left;
  width: 370px;
  height: 350px;
  background-color: violet;
}
.bigbox-header {
  height: 45px;
}
.bigbox-header h2 {
  float: left;
  margin-left: 30px;
}
.bigbox-header a {
  float: right;
  color: rgb(102, 102, 102);
}
.bigbox-header a:hover {
  color: rgb(255, 63, 41);
}
.bigbox-main ul li {
  float: left;
  width: 259px;
  height: 270px;
  margin-top: 15px;
  margin-left: 10px;
  background-color: #fff;
  border-radius: 10px;
}
.bigbox-main ul li img {
  width: 259px;
  border-radius: 10px 10px 0 0;
}
.bigbox-main ul li h4 {
  margin: 15px 20px 20px 25px;
}
.bigbox-main .name {
  margin: 0 20px 0 20px;
}
.bigbox-main .name button {
  font-size: 10px;
  color: rgb(255, 194, 106);
  width: 55px;
  height: 20px;
  border: 1px solid rgb(255, 194, 106);
  margin-left: 5px;
  background-color: #fff;
}
.bigbox-main .info {
  margin: 15px 20px 0 25px;
  font-size: 12px;
  color: rgb(102, 102, 102);
}
/* 微专业 */
.bigmiddle {
  width: 1220px;
  height: 310px;
  /* background-color: aqua; */
  margin: auto;
  margin-top: 10px;
}
.bigmiddle-header {
  height: 45px;
}
.bigmiddle-header a {
  float: right;
}
.bigmiddle-header a:hover {
  color: rgb(255, 63, 41);
}
.bigmiddle-header h2 {
  float: left;
  margin-left: 30px;
}
.bigmiddle-main ul li {
  float: left;
  width: 292px;
  height: 250px;
  margin-top: 15px;
  margin-left: 10px;
  border-radius: 10px;
}
.bigmiddle-main ul li img {
  width: 292px;
  height: 164.38px;
  border-radius: 5px 5px 0 0;
}
.bigmiddle-main ul li h4 {
  margin: 15px 20px 10px 25px;
}
/* 底部 */
.footer {
  height: 178px;
  background-color: rgb(71, 68, 67);
}
.footer ul li {
  float: left;
}
.footer ul li a {
  color: #fff;
  padding: 20px;
}
.footer .title {
  width: 800px;
  height: 30px;
  /* background-color: red; */
  padding-top: 30px;
}
.footer .title a:hover {
  border-bottom: 2px solid #fff;
}
</style>
